<template>
  <div>
     <mc-map :data="data" @focus-key="focusKey" @focus-value="focusValue" key-placeholder='当前表键名' value-placeholder='父亲表键名'></mc-map>
     <el-drawer
       title="选择字段"
       :visible.sync="drawer" :modal="false">
           <mc-db-table-field @choose="choose" :data="treeData" :project-uuid="projectUuid"></mc-db-table-field>
     </el-drawer>
     <el-button @click="print">打印</el-button>
     <el-button @click="change">变更</el-button>
  </div>
</template>

<script>
import McMap from './components/McMap'
import McDbTableField from './components/McDbTableField'

export default {
    data(){
      return {
          data:{
            a:1
          },
          drawer:false,
          projectUuid:"2c9fe31d79d0fba10179d0fea5be0000",
          treeData:{
            db:"",
            table:"",
            field:""
          },
          currentData:null
		  }
    },
    components:{
      McMap,
      McDbTableField,
    },
    methods:{
        print(){
            console.log(this.data)
        },
        saveData(val){
            console.log(val);
        },
        change(){
            this.data.fields = [{"name":"id","title":"主键"}]
        },
        focusKey:function(item){
            this.currentData = item;
            this.drawer =true;
        },
        focusValue:function(item){
            this.currentData = item;
            this.drawer =true;
        },
        choose:function(data){
            this.currentData.item[this.currentData.field]=data.field;
        }
    }
}
</script>

<style>

</style>
